<template>
  <div class="log-box-main">
    <h2>手机号登录</h2>
    <ul class="login-lists">
      <li>
        <input type="number" placeholder="请输入手机号" @input="phoneInput" oninput="if(value.length>4)value=value.slice(0,11)" maxlength="11" v-model="phoneNumber">
        <div class="clear-btn" v-show="phoneNumber.trim()" @click="clearTxt">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gb-untitled94"></use>
          </svg>
        </div>
      </li>
      <!-- <LogTips :tips="phoneTips" v-if="phoneTips.trim()"></LogTips> -->
      <li class="yan-zheng">
        <input type="number" placeholder="请输入验证码" oninput="if(value.length>5)value=value.slice(0,5)" v-model="yzNumber" @input="yzInput" maxlength="6">
        <button :disabled="!(phoneChecked&&!reseting)" @click="getCode">{{yzTitle}}</button>
      </li>
      <LogTips :tips="yzTips" v-if="yzTips.trim()"></LogTips>
      <li class="yan-zheng">
        <input type="number" oninput="if(value.length>4)value=value.slice(0,4)" @input="clearYzm('yzmTips')" v-model="yanZhengMa" placeholder="图形验证码">
        <div class="yzm-box" @click="resetYzm">
          <img :src="yamLoading">
        </div>
      </li>
      <!-- <LogTips :tips="yzmTips" v-if="yzmTips.trim()"></LogTips> -->
    </ul>
    <div class="commit-btn">
      <button class="flex-box" @click="commmitAccount" isLoging: :disabled="!phoneChecked || !yzChecked || !yzmChecked ||isLoging" >登录
        <span class="flex-box" v-show="isLoging">中 <img src="../../assets/img/more-loading-w.gif"></span>
      </button>
    </div>
  </div>
</template>

<script>
import LogTips from '@/components/Login/LogTips.vue'
import qs from 'qs'
export default {
  name: 'home',
  data() {
    return {
      phoneNumber: '',
      phoneTips: '',
      yzTips: '',
      yzmTips: '',
      yzNumber: '',
      yanZhengMa: '',
      yzTitle: '获取验证码',
      yzDisable: true,
      reseting: false,
      LoginType: '-1',
      remember: 1
    }
  },
  props: ['isLoging', 'isRemember', 'yamLoading', 'pageAMsg', 'getLoginType'],
  components: {
    LogTips
  },
  computed: {
    phoneChecked: function() {
      let reg = /^1[23456789]\d{9}$/
      return reg.test(this.phoneNumber)
    },
    yzChecked: function() {
      return /\d{5}/.test(this.yzNumber)
    },
    yzmChecked: function() {
      return /\d{4}/.test(this.yanZhengMa)
    }
  },
  methods: {
    clearTxt() {
      this.phoneNumber = ''
    },
    clearYzm(data) {
      this[data] = ''
    },
    resetYzm() {
      this.yanZhengMa = ''
      this.$bus.$emit('resetLogYam')
    },
    getCode() {
      this.reseting = true
      this.yzNumber = ''
      this.yzTips = ''
      this.$API
        .sendRandomPwd(qs.stringify({ loginname: this.phoneNumber, logintype: '-1' }))
        .then(data => {
          console.log(data)
          // this.$bus.$emit('setShowMsg', data.data.message)
          // if (data.data.status == 1) {
          //   this.reseting = true
          //   let count = 60
          //   let timeSet = setInterval(() => {
          //     count--
          //     this.yzTitle = '重新获取' + count
          //     if (count < 0) {
          //       clearInterval(timeSet)
          //       this.reseting = false
          //       this.yzTitle = '重新获取'
          //     }
          //   }, 1000)
          // } else {
          //   setTimeout(() => {
          //     this.reseting = false
          //   }, 3000)
          //   // this.showMsg(data.data.message, 'pop-fail')
          // }
          switch (data.flag) {
            case '-1':
              this.$msg('请勿频繁操作')
              setTimeout(() => {
                this.reseting = false
              }, 60000)
              break
            case '0': {
              //成功
              this.reseting = true
              this.$msg('密码已发送至您的手机')
              let count = 60
              let timeSet = setInterval(() => {
                count--
                this.yzTitle = '重新获取' + count
                if (count < 0) {
                  clearInterval(timeSet)
                  this.reseting = false
                  this.yzTitle = '重新获取'
                }
              }, 1000)
              break
            }
            case '1':
              this.reseting = false
              this.$msg('获取随机密码失败')
              break
            case '2':
              this.reseting = false
              this.$msg('账户不存在')
              break
            case '3':
              this.reseting = false
              this.$msg('您的账户未激活')
              break
            case '4':
              this.reseting = false
              this.$msg('您的账户已被禁用')
              break
            case '5':
              this.reseting = false
              this.$msg('您的账户已被锁定')
              break
            case '6':
              //多条账户
              this.reseting = false
              this.$msg('无法识别账号类型，请选择具体账号类型重新登录')
              break
            case '7':
              this.reseting = false
              this.$msg('获取随机密码失败')
              break
            case '8':
              this.reseting = false
              this.$msg('获取随机密码失败')
              break
            case '9':
              this.reseting = false
              this.$msg('获取随机密码失败')
              break
            default:
              this.reseting = false
              this.$msg('获取随机密码失败')
              break
          }
        })
    },
    phoneInput() {
      this.phoneTips = ''
    },
    yzInput() {
      this.yzTips = ''
    },
    commmitAccount() {
      this.LoginType = this.getLoginType(this.account)
      this.remember = this.isRemember ? 1 : 0
      if (!this.reseting) {
        this.yzTips = '✱ 请点击获取验证码'
        return
      } else {
        let data = {
            loginname: this.phoneNumber,
            password: this.$md5(this.yzNumber),
            logintype: this.LoginType,
            targetUrl: this.$route.query.redirect,
            vcode: this.yanZhengMa,
            remember: this.remember
          },
          storage = {
            loginname: this.phoneNumber,
            password: '',
            page: 1
          }
        this.$bus.$emit('commitLogin', data, storage)
      }
    }
  },
  created() {
    if (this.pageAMsg) {
      this.phoneNumber = this.pageAMsg.loginname
    }
  },
  mounted() {
    // console.log(this.phoneChecked)
  }
}
</script>
